<template>
	<view class="outtor">
		<view class="menu_title">
			<view class="bottom_border" @click="ordersExample.index = 1"><text :class="ordersExample.index==1?'cor':''">全部订单</text></view>
			<view class="bottom_border" @click="ordersExample.index = 2"><text :class="ordersExample.index==2?'cor':''">未支付</text></view>
			<view class="bottom_border" @click="ordersExample.index = 3"><text :class="ordersExample.index==3?'cor':''">已支付</text></view>
			<view class="bottom_border" @click="ordersExample.index = 4"><text :class="ordersExample.index==4?'cor':''">已使用</text></view>
			<view class="bottom_border" @click="ordersExample.index = 5"><text :class="ordersExample.index==5?'cor':''">已过期</text></view>
		</view>
	
	
		<view class="el" v-for="(list,index) in orders">
			<view class="navTitle" >
				<view><text class="icon">&#59230;</text>约克自营</view>
				<view>123</view>
			</view>
			
			<view class="actInfo">
				<view class="">
					<image :src="list.img" mode=""></image>
				</view>
				<view class="info">
					<text>{{list.actName}}</text><br><br><br>
					<text>购买价格 : <text class="price">{{list.price}}X{{list.number}}</text></text>
				</view>
			</view>
			<hr>
			<view class="actInfo1">
				<view class="left"><text>应支付总价 : </text><text class="price icon">￥{{list.price*list.number}}</text></view>
				<view class="right" v-if="list.status == 2" @tap="toPay('../activePlayer',index)"> 立即付款 </text></view>
			</view>
		</view>
		
		
		
		
		<view class="uni-loadmore" v-if="showLoadMore">{{loadMoreText}}</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user:{},
				orders:[],
				
				ordersExample:{
					pageIndex:1,
					number:10,
					index: 1,
					count:-1,
					userId:''
				},
				page:{},
				loadMoreText: "加载中...",
				showLoadMore: false
			}
		},
		onLoad() {
			this.user=uni.getStorageSync("user");
			this.ordersExample.userId=this.user.userId;
			this.selectAllOrder();
		},
		methods: {
			selectAllOrder(){
				console.log(this.ordersExample);
				var _this = this;
				uni.request({
					url:_this.webUrl+"activity/selecrAllOrder",
					data:_this.ordersExample,
					success(res) {
						_this.orders = _this.orders.concat(res.data.list);
						console.log(_this.orders);
						_this.showLoadMore = false;
					},fail(e) {
						console.log(e);
					}
				})
			},
			toPay(obj,index){
				var _this = this;
				console.log(this.orders);
				var activeList = {
					img: this.orders[index].img,
					number: this.orders[index].number,
					price: this.orders[index].price,
					actName: this.orders[index].actName,
					actId: this.orders[index].actId,
					campId: this.orders[index].campId,
					userId:uni.getStorageSync('user').userId
				}
				
				uni.setStorage({
					key: 'activeList',
					data: activeList,
					success(res2) {
						uni.navigateTo({
							url: obj
						});
					}
				})
			}
		},
		onReachBottom() { //监听上拉触底事件
			console.log('onReachBottom');
			this.showLoadMore = true;
			console.log(this.orders.length);
			setTimeout(() => {
				//获取数据
				if (this.orders.length < this.page.count){//测试数据
					this.postsExample.count = this.page.count;
					this.postsExample.pageIndex++;
					this.selectAllOrder();
				}else{
					this.loadMoreText = "暂无更多";
				}
			}, 1000);
		},
		watch:{
			'ordersExample.index' : function(){
				console.log(this.ordersExample.index);
				this.ordersExample.count = -1;
				this.ordersExample.pageIndex = 1;
				this.orders = [];
				this.selectAllOrder();
			}
		}
	}
</script>

<style lang="scss">
	.icon{
		color: #ffaa00;
		margin-right: 25rpx;
	}
	.outtor {
		background-color: #DCDDDD;
		
		width: 750rpx;
		
		.menu_title {
			width: 750rpx;
			height: 100rpx;
			background-color: #464646;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-around;
			line-height: 100rpx;
			color: white;
			font-size: 30rpx;
			text-align: center;
			
			.bottom_border {
				width: 20%;
				height: 100rpx;
			
				.cor {
					color: #FF3333;
				}
			}
		}
	}
	.el{
		font-size: 15px;
		width: 100%;
		background-color: #Dcdddd;
		margin-bottom: 12rpx;
		view{
			background-color: white;
		}
		
		.navTitle{
			display: flex;
			justify-content: space-between;
			padding: 25rpx;
		}
		.actInfo{
			display: flex;
			justify-content: space-around;
			padding: 25rpx;
			
			info{
				text{
					line-height: 40px;
				}
			}
			
			image{
				width: 80px;
				height: 80px;
			}
		}
		
		.actInfo1{
			display: flex;
			justify-content: space-between;
			padding: 25rpx;
			
			.right{
				width: 25%;
				background-color: #946666;
				text-align: center;
				line-height: 25px;
				color: white;
			}
		}
		
	}
	
	.uni-loadmore{
		height:80upx;
		line-height:80upx;
		text-align:center;
		padding-bottom:30upx;
	}
</style>
